<template>
  <div class="t-textarea" ref="parent">
    <textarea
      ref="el"
      @input="fitToContent"
      :placeholder="placeholder"
      v-model="model"
      @keydown="e => $emit('keydown', e)"
    ></textarea>
  </div>
</template>
<script>
export default {
  name: "TTextarea",
  props: {
    value: {
      type: String,
      default: ""
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    placeholder: {
      type: String
    }
  },
  data() {
    return {
      model: this.value
    };
  },
  watch: {
    value(v) {
      this.model = v;
    },
    model(v) {
      this.$emit("input", v);
    }
  },
  computed: {
    focused() {
      return this.$refs.el === document.activeElement;
    }
  },
  methods: {
    fitToContent() {
      if (!this.$refs.el || !this.$refs.parent) return;
      // from Quasar
      const el = this.$refs.el;
      const parentStyle = this.$refs.parent.style;

      // reset height of textarea to a small size to detect the real height
      // but keep the total control size the same
      parentStyle.marginBottom = el.scrollHeight - 1 + "px";
      el.style.height = "1px";

      el.style.height = el.scrollHeight + "px";
      parentStyle.marginBottom = "";
    }
  },
  mounted() {
    this.fitToContent();
  }
};
</script>
